<!-- eslint-disable vue/multi-word-component-names -->
<template>
<!--  组件的交互-->
   <div>
     <h1>{{ msg }}</h1>
     <h2>学生姓名:{{ name }}</h2>
     <h2>学生性别:{{ sex }}</h2>
     <h2>学生年龄:{{ MyAge+1 }}</h2>
     <button @click="updateAge">点我修改年龄</button>
   </div>
</template>

<script>
  //组件交互的代码
  //export default school分别暴露
  export default { //开发者工具最终呈现的名字为School
    data(){
      return {
        msg:"尚硅谷学生",
        MyAge:this.age
        
      }
    },
    methods:{
      updateAge(){
        this.MyAge++;
      }
    },
    //简单声明接收
    // props:['name','age','sex'],
    //接受的同时对数据进行类型限制
    // props:{
    //   name:String,
    //   age:Number,
    //   sex:String
    // }
    //接收的同事对数据:进行类型限制+默认值的指定+必要性的限制
    props:{
      name:{
        type:String, //name的类型为String
        required:true, //name为必传项
        // default:"张三" 
      },
      age:{
        type:Number,
        default:99
      },
      sex:{
        type:String,
        default:"男"
      }
    }
    
  };

  //统一暴露
  // export { school };
  // export default school //默认暴露
</script>
